<template>
  <echart :options="options" :loading="loading" />
</template>
<script setup>
import { ref, defineProps, watch } from "vue"
import echart from "./src"
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  name: {
    type: String,
    default: "",
  },
  dataset: {
    type: Object,
    require: true,
    default: () => ({}),
  },
  color: {
    type: Array,
    require: true,
    default: () => [],
  },
  roseType: {
    type: String,
    default: () => "",
  },
  precent: {
    type: String,
    default: () => "",
  },
  position: {
    type: String,
    default: () => "right",
  },
  fixColor: {
    type: Boolean,
    default: false,
  },
  legendShow: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  radius: {
    type: Array,
    default: () => ["40%", "60%"],
  },
})
watch(
  () => props.dataset,
  (val) => {
    options.value.dataset = val
  }
)
console.log(props.color, 'props.color');

const options = ref({
  title: {
    text: props.title,
    left: "center",
  },
  legend: {
    show: props.legendShow,
    type: "scroll",
    orient: "vertical",
    x: "left",
    align: "left",
    top: "middle",
    itemWidth: 5,
    itemHeight: 30,
    textStyle: {
      color: "#8C8C8C",
    },
    height: 250,
    formatter: function (name) {
      let value = ''
      options.value.dataset.source.forEach(element => {
        if(element.name == name){
          value = element.value
        }
      });
      return `${name}\n` + `{bigFont|${value}}`;
    },
    textStyle:{
      rich: {
        bigFont: {
          padding: [5, 0, 0, 0],
          fontSize: 18, // 设置大字体
          fontWeight: 'bold',
        },
      }
    }
  },
  series: [
    {
      name: props.name,
      type: "pie",
      radius: props.radius,
      roseType: "area",
      width: "70%",
      left: props.position == "right" ? "15%" : "left",
      clockwise: false, //饼图的扇区是否是顺时针排布
      label: {
        normal: {
          show: false,
          formatter: function (parms) {
            return parms.data.value
          },
          textStyle: {
            fontWeight: "normal",
            fontSize: 12,
          },
          color: function (prams) {
            return props.color[prams.dataIndex]
          },
        },
      },
      labelLine: {
        show: false,
      },
      itemStyle: {
        color: function (prams) {
          return props.color[prams.dataIndex]
        },
        borderColor: "#fff",
        borderWidth: 2,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 5,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
})
</script>
